<template>
  <el-row class="sidebar-container tac">
    <el-col>
      <div class="title-container">
        <h5 class="title">用户行为分析系统</h5>
      </div>
      <el-menu
        router
        mode="vertical"
        :default-active="activeMenu"
        class="el-menu-vertical"
      >
        <el-menu-item index="/">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>流量分析</span>
          </template>
          <el-menu-item-group title="第一部分">
            <el-menu-item index="/trafficByDay">基于天级别访问</el-menu-item>
            <el-menu-item index="/trafficByHour">基于小时级别访问</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="第二部分">
            <el-menu-item index="/trafficByUserBehavior"
              >不同行为（Type & Hour）</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="/convertionRate">
          <el-icon>
            <document />
          </el-icon>
          <span>转化率分析</span>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>用户价值分析</span>
          </template>
          <el-menu-item-group title="第一部分">
            <el-menu-item index="/userArpuAndArppu"
              >ARPU & ARPPU 分析</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group title="第二部分">
            <el-menu-item index="/userRepeatBuy"
              >复购率 & 复购周期分析</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>K-Means 聚类分析</span>
          </template>
          <el-menu-item-group title="第一部分">
            <el-menu-item index="/clusteringFeature">不同特征分析</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="第二部分">
            <el-menu-item index="/clusterAnalysisResults"
              >聚类结果分析</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
import { watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMenuStore } from "@/stores/menuStore";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const menuStore = useMenuStore();

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    menuStore.setActiveMenu(newPath);
  }
);

// 使用 store 中的状态
const activeMenu = computed(() => menuStore.activeMenu);
</script>

<style scoped>
.el-menu {
  border: none;
}

.sidebar-container {
  height: 100%;
  border-right: 1px solid #dcdcdc;
  width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.title {
  font-size: 18px;
  font-weight: 700;
  color: #181818;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #dcdcdc;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #181818;
}
</style>
